html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(10, 10, 10);
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.wrapper .block_1 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.1s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px;
  border: 1px solid transparent;
  width: 20px;
  height: 20px;
}
.wrapper .block_2 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.2s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px;
  border: 1px solid transparent;
  width: 40px;
  height: 40px;
}
.wrapper .block_3 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.3s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -30px;
  border: 1px solid transparent;
  width: 60px;
  height: 60px;
}
.wrapper .block_4 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.4s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -40px;
  border: 1px solid transparent;
  width: 80px;
  height: 80px;
}
.wrapper .block_5 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.5s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px;
  border: 1px solid transparent;
  width: 100px;
  height: 100px;
}
.wrapper .block_6 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.6s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -60px;
  border: 1px solid transparent;
  width: 120px;
  height: 120px;
}
.wrapper .block_7 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.7s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -70px;
  border: 1px solid transparent;
  width: 140px;
  height: 140px;
}
.wrapper .block_8 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.8s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -80px;
  border: 1px solid transparent;
  width: 160px;
  height: 160px;
}
.wrapper .block_9 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 0.9s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -90px;
  border: 1px solid transparent;
  width: 180px;
  height: 180px;
}
.wrapper .block_10 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px;
  border: 1px solid transparent;
  width: 200px;
  height: 200px;
}
.wrapper .block_11 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.1s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -110px;
  border: 1px solid transparent;
  width: 220px;
  height: 220px;
}
.wrapper .block_12 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.2s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -120px;
  border: 1px solid transparent;
  width: 240px;
  height: 240px;
}
.wrapper .block_13 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.3s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -130px;
  border: 1px solid transparent;
  width: 260px;
  height: 260px;
}
.wrapper .block_14 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.4s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -140px;
  border: 1px solid transparent;
  width: 280px;
  height: 280px;
}
.wrapper .block_15 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.5s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -150px;
  border: 1px solid transparent;
  width: 300px;
  height: 300px;
}
.wrapper .block_16 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.6s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -160px;
  border: 1px solid transparent;
  width: 320px;
  height: 320px;
}
.wrapper .block_17 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.7s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -170px;
  border: 1px solid transparent;
  width: 340px;
  height: 340px;
}
.wrapper .block_18 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.8s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -180px;
  border: 1px solid transparent;
  width: 360px;
  height: 360px;
}
.wrapper .block_19 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 1.9s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -190px;
  border: 1px solid transparent;
  width: 380px;
  height: 380px;
}
.wrapper .block_20 {
  animation: spin 4s infinite ease-in-out, rainbow 4s infinite linear;
  animation-delay: 2s;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px;
  border: 1px solid transparent;
  width: 400px;
  height: 400px;
}

@keyframes rainbow {
  14.2857142857% {
    border-color: red;
  }
  28.5714285714% {
    border-color: orange;
  }
  42.8571428571% {
    border-color: yellow;
  }
  57.1428571429% {
    border-color: green;
  }
  71.4285714286% {
    border-color: blue;
  }
  85.7142857143% {
    border-color: indigo;
  }
  100% {
    border-color: violet;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(90deg);
  }
  80% {
    transform: rotate(0deg);
  }
}